<template>
  <!-- 
    图片查看器组件，基于Element Plus的el-image-viewer
    功能：显示图片列表，支持切换、缩放等操作
  -->
  <el-image-viewer
    v-if="show"
    :hide-on-click-modal="true"
    :url-list="imageUrls"
    show-progress
    :initial-index="0"
    @close="$emit('close')"
  >
  <template
        #toolbar="{ actions, prev, next, reset, activeIndex, setActiveItem }"
      >
        <el-icon @click="prev"><Back /></el-icon>
        <el-icon @click="next"><Right /></el-icon>
        <el-icon @click="actions('zoomOut')"><ZoomOut /></el-icon>
        <el-icon
          @click="actions('zoomIn', { enableTransition: false, zoomRate: 2 })"
        >
          <ZoomIn />
        </el-icon>
        <!-- <el-icon
          @click="
            actions('clockwise', { rotateDeg: 180, enableTransition: false })
          "
        >
          <RefreshRight />
        </el-icon> -->
        <el-icon @click="actions('clockwise')"><RefreshRight /></el-icon>
        <el-icon @click="actions('anticlockwise')"><RefreshLeft /></el-icon>
        <el-icon @click="reset"><Refresh /></el-icon>
        <!-- <el-icon @click="download(activeIndex)"><Download /></el-icon> -->
        <el-icon @click="openfolder(activeIndex)"><Folder /></el-icon>
  </template>
  </el-image-viewer>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
// import ElIcon from '@element-plus/components/icon'
import {
  Back,
  DArrowRight,
  Download,
  Refresh,
  RefreshLeft,
  RefreshRight,
  Right,
  ZoomIn,
  ZoomOut,
} from '@element-plus/icons-vue'
/**
 * 图片查看器组件
 * 功能：显示图片列表并提供查看功能
 */
 interface ImageItem {
  url: string
  filePath?: string
}

interface Props {
  images: ImageItem[]  // 修改为接收对象数组
  show: boolean
}
// interface Props {
//   images: string[]  // 图片URL列表
//   show: boolean     // 是否显示查看器
// }

// 定义组件props
const props = defineProps<Props>()
const imageUrls = computed(() => props.images.map(img => img.url))
// 定义组件事件
defineEmits(['close'])  // 关闭查看器事件

/**
 * 打开图片所在文件夹
 * @param {number} index - 当前图片索引
 */
const openfolder = (index: number) => {
  const electronAPI = (window as any).electronAPI
  if (electronAPI && electronAPI.showItemInFolder) {
    const imagePath = props.images[index]?.filePath
    console.log(props.images[index])
    if (imagePath) {
      electronAPI.showItemInFolder(imagePath)
    }
  }
}
</script>
